<template>
  <el-dialog title="编辑话术" :visible.sync="visible" width="80%">
    <el-form label-width="120px" size="mini" :model="form" :rules="rules" ref="form">
      <el-row >
        <el-col :span="8">
            <el-form-item label="话术类型">
              <el-select
                v-model="form.type"
                placeholder="请选择"
                size="mini"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="8">
          <el-form-item label="话术标题:" prop="verbalTitle">
            <el-input size="mini" v-model="form.verbalTitle"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="22">
          <el-form-item label="话术内容" prop="verbalContent">
            <quill-editor
              v-model="form.verbalContent"
              ref="myQuillEditor"
              :options="editorOption"
              style="display:flex;flex-flow:column;min-height:200px;"
            >
            <!-- 自定义toolar -->
            <div class="toolbar" slot="toolbar">
              <!-- Add a bold button -->
              <button class="ql-bold" title="加粗">Bold</button>
              <button class="ql-italic" title="斜体">Italic</button>
              <button class="ql-underline" title="下划线">underline</button>
              <button class="ql-strike" title="删除线">strike</button>
              <button class="ql-blockquote" title="引用"></button>
              <button class="ql-code-block" title="代码"></button>
              <button class="ql-header" value="1" title="标题1"></button>
              <button class="ql-header" value="2" title="标题2"></button>
              <!--Add list -->
              <button class="ql-list" value="ordered" title="有序列表"></button>
              <button class="ql-list" value="bullet" title="无序列表"></button>
              <!-- Add font size dropdown -->
              <select class="ql-header" title="段落格式">
                <option selected>段落</option>
                <option value="1">标题1</option>
                <option value="2">标题2</option>
                <option value="3">标题3</option>
                <option value="4">标题4</option>
                <option value="5">标题5</option>
                <option value="6">标题6</option>
              </select>
              <select class="ql-size" title="字体大小">
                <option value="10px">10px</option>
                <option value="12px">12px</option>
                <option value="14px">14px</option>
                <option value="16px" selected>16px</option>
                <option value="18px">18px</option>
                <option value="20px">20px</option>
              </select>
              <select class="ql-font" title="字体">
                <option value="SimSun">宋体</option>
                <option value="SimHei">黑体</option>
                <option value="Microsoft-YaHei">微软雅黑</option>
                <option value="KaiTi">楷体</option>
                <option value="FangSong">仿宋</option>
                <option value="Arial">Arial</option>
              </select>
              <!-- Add subscript and superscript buttons -->
              <select class="ql-color" value="color" title="字体颜色"></select>
              <select
                class="ql-background"
                value="background"
                title="背景颜色"
              ></select>
              <select class="ql-align" value="align" title="对齐"></select>
              <button class="ql-clean" title="还原"></button>
              <!-- You can also add your own -->
            </div>
          </quill-editor>
            <!-- <el-input type="textarea" v-model="form.verbalContent" oncontextmenu="return false" draggable="true" oncopy="retuen false"></el-input> -->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div
      style="display: flex; justify-content: flex-end; margin: 10px 82px 0 0">
      <el-button class="reset-btn" type="primary" size="mini" @click="visible = false">取消</el-button>
      <el-button type="primary" size="mini" @click="save('form')">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Quill, quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// 自定义字体大小
let Size = Quill.import("attributors/style/size");
Size.whitelist = ["10px", "12px", "14px", "16px", "18px", "20px"];
Quill.register(Size, true);
// 自定义字体类型
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
  "宋体",
  "黑体",
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts;
Quill.register(Font, true);
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "80%",
    },
    row: {
      type: Object,
      default:function(){
      return {}
      },
    },
  },
  components: {
  quillEditor,
  },
  data() {
  console.log(this.row);
    return {
      typeOptions: [
        {
          label: "首次回访",
          value: "1",
        },
        {
          label: "逾期催收",
          value: "0",
        },
      ],
      form:{
        type: "",
        verbalTitle:'',
        verbalContent:'',
        ...this.row
      },
      rules:{},
      tabPosition: "left",
      editorOption: {
        placeholder: "请输入话术提醒内容:",
        theme: "snow", // or 'bubble'
        modules: {
          toolbar: {
            container: ".toolbar",
          },
        },
      },
      options2:[]

    };
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", val);
      },
    },
  },
  methods: {
    save(name) {
      this.$refs[name].validate((flag) => {
        if (flag) {
          this.$axios({
            method: "post",
            url: "/IAM/MC/verbal/update",
            params: this.form
          }).then((res) => {
            if (res.code == 200) {
             this.$message.success("修改成功");
            this.$emit("update")

            }
            this.visible = false;
          });
        }
      });
    },
  },
};
</script>

<style>
</style>
